import React from 'react';
import { AutoComplete, Input } from 'choerodon-ui';
import { SelectValue } from 'choerodon-ui/lib/select';
import { useAutoCompleteBasic } from './hooks';
import styles from './index.less';

const { TextArea } = Input;

const AutoCompleteCustom: React.FC = () => {
  const [dataSource, handleSearch] = useAutoCompleteBasic();

  const handleSelect = (value: SelectValue, option: Object) => {
    console.log(value);
    console.log(option);
  };

  return (
    // 设置 <> 或者 div 避免在工程中使用的时候 因为 GUmUIFlag 的插入导致样式等的错位
    <>
      <AutoComplete
        dataSource={dataSource}
        className={styles['certain-category-search']}
        onSelect={handleSelect}
        onSearch={handleSearch}
      >
        <TextArea
          style={{
            width: '100%',
            border: 'none',
          }}
          placeholder="input here"
          className="custom"
        />
      </AutoComplete>
    </>
  );
};

export default AutoCompleteCustom;